<!--
 * @Author: your name
 * @Date: 2021-10-26 20:56:09
 * @LastEditTime: 2021-10-26 20:56:10
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bigdate\src\views\admin\componentsPage\lineSvg.vue
-->
<!--
 * @Author: your name
 * @Date: 2021-10-26 20:52:46
 * @LastEditTime: 2021-10-26 21:15:09
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bigdate\src\views\admin\componentsPage\verify.vue
-->
<template>
    <div class="linesvg">
        <div class="linesvg_title">
            <Card>
                集成图标表示无需依赖Echart从而达到图表渲染效果。仅支持柱状图与环状图，可拖拽！
            </Card>
        </div>
        <div class="linesvg_con">
            <V-dragtabel
                :box-width="386"
                :box-height="160"
                :col-num="3"
                :datas="dataCircels"
            >
                <template #content="{ item }">
                    <Card>
                        <div class="card_con">
                            <div class="card_con_echart">
                                <V-circelSvg :configs="item" :width="100" :height="100" />
                            </div>
                            <div class="card_con_text">
                                <div>转化率</div>
                                <div>
                                    $20,211028
                                    <p
                                        :style="{ color: item.statu == 'up' ? '#007fff' : '#f40' }"
                                    >
                                        {{ item.statu == "up" ? "+20%" : "-20%" }}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </Card>
                </template>
            </V-dragtabel>
        </div>
        <div class="linesvg_con">
            <V-dragtabel
                :box-width="386"
                :box-height="280"
                :col-num="3"
                :datas="datalist"
            >
                <template #content="{ item }">
                    <Card>
                        <div class="card_title">
                            {{ item.text }}
                        </div>
                        <V-lineSvg :configs="item" :width="300" :height="160" />
                    </Card>
                </template>
            </V-dragtabel>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { useMassage } from '@/ntils/hooks'
import { VLineSvg, VCircelSvg } from '@/components/chartSvg'
import VDragtabel from '@/components/dragtabel/index.vue'
import {
    datas1,
    datas2,
    datas3,
    datacircel1,
    datacircel2,
    datacircel3,
} from '@/mock/linesvgdata'
import { Card } from 'ant-design-vue'

export default defineComponent({
    name: 'Varify',
    components: {
        VLineSvg,
        VCircelSvg,
        VDragtabel,
        Card,
    },
    setup() {
        let { createMessage } = useMassage()
        const Verify = ref()
        const onSuccess = (e) => {
            createMessage.success('验证成功！')
        }
        const onReload = () => {
            Verify.value?.reload()
        }

        const datalist = [
            {
                id: '1',
                text: '人均GDP',
                ...datas1,
            },
            {
                id: '2',
                text: '人均收入',
                ...datas2,
            },
            {
                id: '3',
                text: '男女比例',
                ...datas3,
            },
        ]
        const dataCircels = [
            {
                id: '1',
                statu: 'up',
                text: '转化率 ',
                ...datacircel1,
            },
            {
                id: '2',
                statu: 'up',
                text: '使用率',
                ...datacircel2,
            },
            {
                id: '3',
                statu: 'down',
                text: '增长率',
                ...datacircel3,
            },
        ]
        return {
            onSuccess,
            onReload,
            Verify,
            datas2,
            datalist,
            dataCircels,
        }
    },
})
</script>

<style lang="less" scoped>
.linesvg_title {
  margin-bottom: 0.5rem;
}
.card_title {
  height: 20px;
  text-align: center;
}
.card_con {
  display: flex;
  align-items: center;

  &_text {
    display: flex;
    flex-direction: column;
    margin-left: 5rem;
    & > div {
      &:nth-of-type(1) {
        color: #000;
        font-weight: 100;
        font-size: 12px;
      }
      &:nth-of-type(2) {
        color: #000;
        font-weight: bold;
        font-size: 16px;
        margin-top: 0.5rem;
        & > p {
          display: inline-block;
          font-size: 12px;
          margin-left: 0.5rem;
          font-weight: 400;
        }
      }
    }
  }
}
.verify {
  width: 100%;
  &_con {
    width: 300px;
    margin: 5rem auto;
    .card_cell {
      margin: 3rem 0;
      text-align: center;
    }
  }
}
</style>
